<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增课程')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        #map-wrapper{margin:0 auto;width:600px;min-height:300px;}
        #mapContainer{ width:100%; height:400px;}
        #searchBox { width:400px; height:30px; line-height:30px; font-size:15px; margin-top:10px; padding-left:5px;}
        #searchResultPanel { border:1px solid #C0C0C0; width:150px; height:auto; display:none; overflow-y:auto; overflow-x:hidden;}
        #searchResultPanel ul { margin:0; padding:0; list-style:none;}
        #searchResultPanel li { cursor:pointer; margin:0; padding:0; line-height:25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
        #searchResultPanel li:hover { background-color:#E8F5FF;}
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-lesson-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">课程名称：</label>
                <div class="col-sm-8">
                    <input name="lessonName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">打卡方式：</label>
                <div class="col-sm-8">
                    <select name="signType" class="form-control m-b" th:with="type=${@dict.getType('sign_type')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">打卡开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="signStartTime" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">打卡截止时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="signEndTime" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">年级：</label>
                <div class="col-sm-8">
                    <select name="grade" class="form-control m-b" th:with="type=${@dict.getType('grade')}" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label is-required">打卡位置纬度：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="signLocationLat" class="form-control" type="hidden" required>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label class="col-sm-3 control-label is-required">打卡位置经度：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="signLocationLong" class="form-control" type="hidden" required>-->
<!--                </div>-->
<!--            </div>-->

            <input id="signLocationLong" name="signLocationLong" class="form-control" type="hidden" required>
            <input id="signLocationLat" name="signLocationLat" class="form-control" type="hidden" required>
            <div id="map-wrapper">
                <div id="searchBoxContainer">
                    <input id="searchBox" type="text" placeholder="输入关键字搜索位置"/>
                    <div id="searchResultPanel"></div>
                </div>
                <div id="mapContainer"></div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kGzk9mmVpgp9rASgjN2ftWFHoHiqMGsm"></script>
    <script th:inline="javascript">
        var map = new BMap.Map("mapContainer");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);

        var ac = new BMap.Autocomplete({ input: "searchBox", location: map });
        ac.addEventListener("onconfirm", function (e) {
            var value = e.item.value;
            var myValue = value.province + value.city + value.district + value.street + value.business;
            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map }
            });
            local.search(myValue);

            local.setSearchCompleteCallback(function (results) {
                if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                    searchResultPanel.style.display = "block";
                    searchResultPanel.innerHTML = "";
                    for (var i = 0; i < results.getCurrentNumPois(); i++) {
                        addListItem(results.getPoi(i));
                    }
                }
            });
        });

        var searchResultPanel = document.getElementById("searchResultPanel");
        function addListItem(data) {
            var li = document.createElement("li");
            li.innerHTML = data.title;
            li.onclick = function () {
                var point = new BMap.Point(data.point.lng, data.point.lat);
                var marker = new BMap.Marker(point);
                map.clearOverlays();
                map.addOverlay(marker);
                console.log(data.point.lng + ", " + data.point.lat);
                $("#signLocationLat").val(data.point.lat);
                $("#signLocationLong").val(data.point.lng);
            };
            searchResultPanel.appendChild(li);
        }

        map.addEventListener("click", function (e) {
            var point = new BMap.Point(e.point.lng, e.point.lat);
            var marker = new BMap.Marker(point);
            map.clearOverlays();
            map.addOverlay(marker);
            console.log(e.point.lng + ", " + e.point.lat);
            $("#signLocationLat").val(e.point.lat);
            $("#signLocationLong").val(e.point.lng);
        });
    </script>
    <script th:inline="javascript">
        var prefix = ctx + "system/lesson"
        $("#form-lesson-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-lesson-add').serialize());
            }
        }

        // $("input[name='signStartTime']").datetimepicker({
        //     format: "yyyy-mm-dd hh:ii:00",
        //     autoclose: true
        // });
        //
        // $("input[name='signEndTime']").datetimepicker({
        //     format: "yyyy-mm-dd hh:ii:00",
        //     autoclose: true
        // });

    </script>
</body>
</html>